import React, { useState } from 'react';
import { Card, Button, Modal, Select, Form, Tree, Table, Input, notification } from 'antd';
import { AudioOutlined } from '@ant-design/icons';
import { useAuthregister } from "../../../hooks/Authoritymanage"
import { useEffect } from 'react';
import { role_add, role_del, role_addauth } from '../../../utils/api'
import '../../../style/Permissionlist.scss'
import Authbutton from '../../../utils/Authbutton'

const { Search } = Input;
const { Option } = Select;
const formItemLayout = {
    labelCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 6,
        },
    },
    wrapperCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 16,
        },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};
function Permissionlist(props) {
    var [pagination, setPagination] = useState([{ current: 1, total: 10, pageSize: 10 }])
    var [roleid, setRoleid] = useAuthregister();
    const [form] = Form.useForm();
    useEffect(() => {
        console.log(roleid);
    }, [roleid])
    const columns = [
        {
            title: '角色名称',
            dataIndex: 'name',
        },
        {
            title: '姓名',
            dataIndex: 'desc',
        },
        {
            title: '操作',
            render: (_, record) => (
                <div className="icon">
                    {Authbutton(111) ? <button className='active'><i className='iconfont icon-bianji  edit' onClick={() => { edit(record) }}>分配权限</i></button>
                        : <Button type='default' disabled><i className='iconfont icon-bianji  edit1'  >禁用</i></Button>
                    }
                    <i className='iconfont icon-shanchu' onClick={() => { del(record) }}>删除</i>
                </div>
            ),
        },
    ];
    // 添加角色
    // 弹框的初始状态
    const [isModalOpen, setIsModalOpen] = useState(false);
    const showModal = () => {
        setIsModalOpen(true);
    };
    const handleOk = () => {
        form.submit();
        setTimeout(() => {
            setIsModalOpen(false);
        }, 800);
    };
    const handleCancel = () => {
        setIsModalOpen(false);
    };
    const onFinish = (values) => {
        console.log(values);
        if (values) {
            role_add(values).then((res) => {
                // console.log(res.data);
                if (res.data.code == 200) {
                    notification.warning({ message: res.data.msg, duration: 1 })
                    setRoleid(res.data.list);
                } else {
                    notification.warning({ message: res.data.msg, duration: 1 })
                }
            })
            form.setFieldsValue({ name: "", desc: "" })
        } else {
            notification.warning({
                message: "请输入想要添加的角色",
                duration: 1
            })
        }

    };
    var adddata = () => {
        showModal();
    }
    // 删除角色权限
    var del = (record) => {
        console.log(record);
        role_del(record).then((res) => {
            if (res.data.code == 200) {
                notification.success(({
                    message: res.data.msg,
                    duration: 1
                }))
                setRoleid(res.data.list);
            } else {
                notification.error({
                    message: res.data.msg,
                    duration: 1
                })
            }
        })
    }
    var handleChange = (pagination) => {
        console.log(pagination)
    }
    // 分配权限
    // 添加角色
    // 弹框的初始状态
    const treeData = [
        {
            title: '权限管理',
            key: '2',
            children: [
                {
                    title: '权限列表',
                    key: '21',
                    // disabled: true,
                },
                {
                    title: '角色列表',
                    key: '22',
                },
            ],
        },
        {
            title: '学生管理',
            key: '3',
            children: [
                {
                    title: '学生信息',
                    key: '31',
                    // disabled: true,
                },
                {
                    title: '学生信息图表',
                    key: '32',
                    // disabled: true,
                },
                {
                    title: '学生学习',
                    key: '33',
                    // disabled: true,
                },
            ],
        },
        {
            title: '风险地区',
            key: '4',
            children: [
                {
                    title: '地区信息',
                    key: '41',
                    // disabled: true,
                },
            ],
        },
        {
            title: '行程管理',
            key: '5',
            children: [
                {
                    title: '行程信息',
                    key: '51',
                    // disabled: true,
                },
            ],
        },
        {
            title: '健康管理',
            key: '6',
            children: [
                {
                    title: '健康上报',
                    key: '61',
                    // disabled: true,
                },
            ],
        },
        {
            title: '请假管理',
            key: '7',
            children: [
                {
                    title: '请假信息',
                    key: '71',
                    // disabled: true,
                },
            ],
        },
        {
            title: '疫情通告',
            key: '8',
            children: [
                {
                    title: '疫情通知',
                    key: '81',
                    // disabled: true,
                },
            ],
        },
    ];
    const onSelect = (selectedKeys, info) => {
        console.log('selected', selectedKeys, info);
    };
    var [keys, setKeys] = useState([])
    const onCheck = (checkedKeys, info) => {
        console.log('onCheck', checkedKeys);
        setKeys(checkedKeys);
    };
    const [isModalOpen1, setIsModalOpen1] = useState(false);
    const showModal1 = () => {
        setIsModalOpen1(true);
    };
    const handleOk1 = () => {
        // setTimeout(() => {
        //     setIsModalOpen1(false);
        // }, 800);
        // keys是权限的数组
        var keys1 = keys.map((item, index) => {
            return Number(item);
        })
        role_addauth({ _id: userid, permissions: keys1 }).then((res) => {
            if (res.data.code == 200) {
                notification.success({ message: res.data.msg, duration: 1 })
            } else {
                notification.error({ message: res.data.msg, duration: 1 })
            }
        })
        handleCancel1();
    };
    const handleCancel1 = () => {
        setIsModalOpen1(false);
    };
    var [userid, setUserid] = useState('')
    var edit = (record) => {
        console.log(record);
        setUserid(record._id)
        showModal1();
    }

    return (
        <div className='permissionlist'>
            <Card bordered={false} >
                <h4 style={{ fontSize: 22, padding: "10px 0" }}> 角色列表</h4>
                <div className="list">
                    {
                        Authbutton(111) ? <Button type="primary" style={{ margin: "10px 0" }} onClick={() => { adddata() }}>添加角色</Button>
                            : <Button type="default" disabled style={{ margin: "10px 0" }}  >禁用状态</Button>

                    }
                    <>
                        <Modal title="添加用户" okText="确定" cancelText="取消" centered open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                            <Form
                                {...formItemLayout}
                                form={form}
                                name="Register"
                                onFinish={onFinish}
                                scrollToFirstError
                            >
                                <Form.Item
                                    name="name"
                                    label="角色名称"
                                    rules={[
                                        {
                                            type: 'text',
                                            message: 'The input is not valid user!',
                                        },

                                        {
                                            required: true,
                                            message: 'Please input your user!',
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>

                                <Form.Item
                                    name="desc"
                                    label="角色描述"
                                    tooltip="What do you want others to call you?"
                                    rules={[
                                        {
                                            required: true,
                                            message: 'Please input your name!',

                                        },
                                        {
                                            validator: (rule, value) => {
                                                let reg = new RegExp(/^(?:[\u4e00-\u9fa5·]{2,16})$/);
                                                if (reg.test(value) == false) {
                                                    return Promise.reject('姓名至少2位且是中文');
                                                } else {
                                                    return Promise.resolve();
                                                }
                                            }
                                        },
                                    ]}
                                >
                                    <Input />
                                </Form.Item>



                            </Form>
                        </Modal>
                    </>
                    <>
                        <Modal title="分配权限" okText="确定" cancelText="取消" centered open={isModalOpen1} onOk={handleOk1} onCancel={handleCancel1}>
                            <Tree
                                checkable
                                onSelect={onSelect}
                                onCheck={onCheck}
                                treeData={treeData}
                            />
                        </Modal>
                    </>
                </div>

                <Table size='middle' pagination={pagination} onChange={handleChange} columns={columns} dataSource={roleid} />

            </Card>
        </div>
    );
}

export default Permissionlist;